<template>
  <div class="AI-report">
    <div class="ai-top-banner report-top-banner">
      <div class="ai-banner-btns">
        <router-link to="/analysis">
          <el-button class="no_border_img">课堂分析</el-button>
        </router-link>
        <el-button class="h_border_img">观察报告</el-button>
        <router-view />
      </div>
    </div>
    <div class="report-export clear">
      <el-button class="fr" type="primary" size="medium" @click="getPdf()">导出</el-button>
    </div>
    <div class="AI-report-banner" id="pdfDom">
      <div class="report-tit">
        <h2>{{ lesson_data.LessonName }}&nbsp;&nbsp;&nbsp;课堂观察分析报告</h2>
      </div>
      <div class="report-class-info">
        <span class="a_r_tit">一、课堂信息</span>
        <table class="class_info_table">
          <tr>
            <th>课程名称</th>
            <th>{{ lesson_data.LessonName }}</th>
            <th>采样时间</th>
            <th>{{ lesson_data.courseDate }}</th>
          </tr>
          <tr>
            <td>学科</td>
            <td>{{ lesson_data.Subject }}</td>
            <td>主讲教师</td>
            <td>{{ lesson_data.TchName }}</td>
          </tr>
          <tr>
            <td>年级</td>
            <td>{{ lesson_data.Grade }}</td>
            <td>班级</td>
            <td>{{ lesson_data.className }}</td>
          </tr>
          <!-- <tr>
                   <td>教材版本</td>
            <td>{{lesson_data.BookVersion}}</td> 
            <td></td>
            <td></td>
          </tr> -->
        </table>
      </div>
      <div class="report-observation">
        <span class="a_r_tit">二、课堂观察记录</span>

        <div class="report_participation">
          <div class="report_average">
            <span class="title">平均课堂参与度</span>
            <span class="count">90%</span>
          </div>

          <div class="student_action">
            <span class="title">学生动作行为次数</span>

            <div class="stu_count">
              <div class="count_body">
                <span class="count">820次</span>
                <span>低头次数</span>
              </div>

              <div class="count_body">
                <span class="count">820次</span>
                <span>抬头次数</span>
              </div>

              <div class="count_body">
                <span class="count">820次</span>
                <span>转头次数</span>
              </div>

              <div class="count_body">
                <span class="count">820次</span>
                <span>举手次数</span>
              </div>

              <div class="count_body">
                <span class="count">820次</span>
                <span>站立次数</span>
              </div>

              <div class="count_body">
                <span class="count">820次</span>
                <span>讨论次数</span>
              </div>
            </div>
          </div>
        </div>

        <div class="report_participation">
          <div class="student_action">
            <span class="title">学生表情变化次数</span>

            <div class="stu_count">
              <div class="count_body">
                <span class="count">820次</span>
                <span>愤怒次数</span>
              </div>

              <div class="count_body">
                <span class="count">820次</span>
                <span>厌恶次数</span>
              </div>

              <div class="count_body">
                <span class="count">820次</span>
                <span>恐惧次数</span>
              </div>

              <div class="count_body">
                <span class="count">820次</span>
                <span>快乐次数</span>
              </div>

              <div class="count_body">
                <span class="count">820次</span>
                <span>中性次数</span>
              </div>

              <div class="count_body">
                <span class="count">820次</span>
                <span>悲伤次数</span>
              </div>

              <div class="count_body">
                <span class="count">820次</span>
                <span>惊喜次数</span>
              </div>
            </div>
          </div>
        </div>

        <div>
          <Behavior :option="option" />
        </div>

        <div>44</div>

        <table class="observation_table">
          <tr>
            <th>序号</th>
            <th colspan="2">观察维度</th>
            <th>比例</th>
            <th>图例</th>
          </tr>
          <tr>
            <td>1</td>
            <td rowspan="4">学生行为</td>
            <td>举手</td>
            <td>{{ BehaviorRecord.Stu.RaiseHand.toFixed(1) }}%</td>
            <td class="observation_table_map" rowspan="8">
              <div id="teacher-action-map" style="width: 400px; height: 300px"></div>
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>读写</td>
            <td>{{ Math.round(BehaviorRecord.Stu.ReadWrite * 10) / 10 }}%</td>
          </tr>
          <tr>
            <td>3</td>
            <td>听讲</td>
            <td>{{ Math.round(BehaviorRecord.Stu.Listening * 10) / 10 }}%</td>
          </tr>
          <tr>
            <td>4</td>
            <td>互动</td>
            <td>{{ Math.round(BehaviorRecord.Stu.Interaction * 10) / 10 }}%</td>
          </tr>
          <tr>
            <td>5</td>
            <td rowspan="4">教师行为</td>
            <td>站立授课</td>
            <td>{{ Math.round(BehaviorRecord.Tch.StandOn * 10) / 10 }}%</td>
          </tr>
          <tr>
            <td>6</td>
            <td>下讲台授课</td>
            <td>{{ Math.round(BehaviorRecord.Tch.DownPlatform * 10) / 10 }}%</td>
          </tr>
          <tr>
            <td>7</td>
            <td>板书</td>
            <td>{{ Math.round(BehaviorRecord.Tch.BlackBoard * 10) / 10 }}%</td>
          </tr>
          <tr>
            <td>8</td>
            <td>走动讲课</td>
            <td>{{ Math.round(BehaviorRecord.Tch.Moving * 10) / 10 }}%</td>
          </tr>
          <tr>
            <td colspan="2" rowspan="2">教学行为分析结论与建议</td>
            <td class="summary clear" colspan="3">
              <span class="s-title">结论：</span>
              <p class="hide-p" contenteditable="true" @input="inputWord(1)" ref="input1">{{ result1 }}</p>
              <span class="numberWord">
                <i>{{ resultLength1 }}</i>
                <i>/500</i>
              </span>
            </td>
          </tr>
          <tr>
            <td class="summary" colspan="3">
              <span class="s-title">建议：</span>
              <p class="hide-p" contenteditable="true" @input="inputWord(2)" ref="input2">{{ result2 }}</p>
              <span class="numberWord">
                <i>{{ resultLength2 }}</i>
                <i>/500</i>
              </span>
            </td>
          </tr>
        </table>

        <div ref="mylineRef" style="width: 100%; height: 400px; margin-top: 10px"></div>

        <div class="focus_container">
          <span class="">学生专注度均值：18.8</span>

          <div class="focus_box_container">
            <div class="box">
              <span>注意力集中阶段</span>
              <span class="box_info"> 发生于[12min ~ 13min]期间，平均专注度为24.1，持续时间2min </span>
            </div>

            <div class="box middle">
              <span>注意力涣散阶段</span>
              <span class="box_info"> 发生于[19min ~ 21min]期间，平均专注度为12.6，持续时间1min </span>
            </div>

            <div class="box">
              <span>学生活跃度分析</span>
              <span class="box_info"> 发生于[16min ~ 18min]期间，学生情绪较兴奋 发生于[21min ~ 23min]期间，学生情绪较低落 </span>
            </div>
          </div>
        </div>

        <div ref="emolineRef" style="width: 100%; height: 400px; margin-top: 10px"></div>

        <table class="observation_table">
          <tr>
            <td colspan="2" rowspan="2" class="summary_merge">教学行为分析结论与建议</td>
            <td class="summary clear" colspan="3">
              <span class="s-title">结论：</span>
              <p class="hide-p" contenteditable="true" @input="inputWord(1)" ref="input1">{{ result1 }}</p>
              <span class="numberWord">
                <i>{{ resultLength1 }}</i>
                <i>/500</i>
              </span>
            </td>
          </tr>
          <tr>
            <td class="summary" colspan="3">
              <span class="s-title">建议：</span>
              <p class="hide-p" contenteditable="true" @input="inputWord(2)" ref="input2">{{ result2 }}</p>
              <span class="numberWord">
                <i>{{ resultLength2 }}</i>
                <i>/500</i>
              </span>
            </td>
          </tr>
        </table>
      </div>

      <div class="report-record">
        <span class="a_r_tit">三、结构式课堂观察记录</span>
        <table class="record_class_table">
          <tr>
            <th class="bgc_b">观察者</th>
            <th>教学AI数据分析系统</th>
            <th class="bgc_b">观察时间</th>
            <th>{{ lesson_data.courseDate }}</th>
          </tr>
          <tr>
            <td class="bgc_b">课程时长</td>
            <td>{{ timeToSec(lesson_data.LessonLength) }}秒</td>
            <td class="bgc_b">采样间隔</td>
            <td>{{ time_data[1] - time_data[0] }}s</td>
          </tr>
          <tr>
            <td class="scatter-tit" rowspan="3">参与度散点图</td>
            <td class="scatter-map-box" colspan="3">
              <div id="join-map" style="width: 100%; height: 100%"></div>
            </td>
          </tr>
          <tr>
            <td class="scatter-data-bx" colspan="3">
              <table class="join_data_table">
                <tr>
                  <th>姓名/s</th>
                  <template v-for="(item, index) of getTwentyVal(time_data, 1)">
                    <td :key="index">{{ item }}</td>
                  </template>
                </tr>
                <tr class="join_table_tr2">
                  <td>均值</td>
                  <template v-for="(item, index) of getTwentyVal(StuAvailableScore.AvgJoinDegree)">
                    <td :key="index">{{ item }}</td>
                  </template>
                </tr>
                <template v-if="showAllVisible == false">
                  <tr v-for="(item, index) of DetailedScore7" :key="index">
                    <td>{{ item.StuName }}</td>
                    <template v-for="(item1, index1) of getTwentyVal(item.JoinDegree)">
                      <td :key="index1">{{ item1 }}</td>
                    </template>
                  </tr>
                </template>
                <template v-if="showAllVisible == true">
                  <tr v-for="(item, index) of DetailedScore" :key="index">
                    <td>{{ item.StuName }}</td>
                    <template v-for="(item1, index1) of getTwentyVal(item.JoinDegree)">
                      <td :key="index1">{{ item1 }}</td>
                    </template>
                  </tr>
                </template>
              </table>
            </td>
          </tr>
          <tr>
            <td colspan="3">
              <el-button v-if="showAllVisible == false" type="text" @click="showAllVisible = true">查看全部参与度数据</el-button>
            </td>
          </tr>
          <tr>
            <td class="teaching-model">教学模型</td>
            <td colspan="3">
              <div id="S-T-map" style="display: inline-block; width: 600px; height: 600px"></div>
              <div class="ch_container">
                <ul class="st_tip">
                  <li>师生互动曲线描述的是老师和学生的互动情况</li>
                  <li>沿横轴方向的线段代表老师在讲话，沿纵轴方向的线段代表学生在讲话</li>
                  <li>当曲线倾斜角小于45度时，表示老师活动占多数；倾斜角大于45度时，学生活动占多数</li>
                  <li>当某段倾斜角约45度时，表示在此段时间内老师学生互动充分。</li>
                </ul>
              </div>

              <div id="RT-CH-map" style="width: 100%; height: 380px"></div>
              <div class="mix-style">
                <span class="a_r_tit">RT - CH 模型标准模式</span>
                <table>
                  <tr>
                    <th>教学模式</th>
                    <th>练习型</th>
                    <th>混合型</th>
                    <th>对话型</th>
                    <th>讲授型</th>
                  </tr>
                  <tr>
                    <td>判断标准</td>
                    <td>Rt &le;0.3</td>
                    <td>Rt &ge;0.7</td>
                    <td>Ch &ge;0.4</td>
                    <td>0.3 &lt;Rt&le; 0.7,Ch&lt;0.4</td>
                  </tr>
                </table>

                <div class="ch_container">
                  <ul class="st_tip">
                    <li>
                      Rt是指教师行为的占有比例，此值越大说明教师行为越多。 Ch是教师行为与学生行为之间的转换次数，此值越大说明教师-学生行为的转换次数越多。
                      四种课堂类型：练习型、讲授型、对话型、混合型是联合Rt和Ch的值来划分的。
                    </li>
                    <li>对话型的显著特点是Ch值，也就是师生转换次数，比较高，此种模式师生之间互动充分</li>
                    <li>讲授型的显著特点是Rt值，也就是教师行为比例，比较高，此种模式以教师讲授为主</li>
                    <li>当教师行为占有率较低时，此时以学生活动为主，为练习型</li>
                    <li>当教师行为占有率在一半附近时，此时教师、学生均充分参与，为混合（探究）型</li>
                  </ul>
                </div>

                <div class="change-maps-box clear">
                  <div class="action-box-r1">
                    <div class="a-box-r1-l">
                      <span class="action-title">学生行为</span>
                      <span class="stu-rate">{{ Math.round(LessonModel.StuRate * 1000) / 10 }}%</span>
                      <span class="action-title">教师行为</span>
                      <span class="teacher-rate">{{ Math.round((1 - LessonModel.StuRate) * 1000) / 10 }}%</span>
                    </div>
                    <div id="rate-map1" style="display: inline-block; width: 50%; height: 100%"></div>
                  </div>
                  <div class="action-box-r2">
                    <div class="a-box-r2-l">
                      <p>行为转化率</p>
                      <p>{{ Math.round(LessonModel.Ch * 1000) / 10 }}%</p>
                    </div>
                    <div id="rate-map" style="display: inline-block; width: 50%; height: 100%"></div>
                  </div>
                  <div class="action-box-r3">
                    <p>{{ ModelTypeData[LessonModel.ModelType - 1] }}</p>
                    <p>课堂类型</p>
                  </div>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="class-type-tit">课堂类型结论</td>
            <td class="summary" colspan="3">
              <p class="hide-p3" contenteditable="true" @input="inputWord(3)" ref="input3">{{ result3 }}</p>
              <span class="numberWord">
                <i>{{ resultLength3 }}</i>
                <i>/500</i>
              </span>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { option, lineOption, emotionOption } from "../../ai/components/options";
import Behavior from "../../ai/echart/behavior.vue";
require("echarts/lib/chart/map");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  data() {
    return {
      showAllVisible: false,
      lesson_data: null,
      htmlTitle: null,
      BehaviorRecord: null,
      LessonModel: null,
      StuAvailableScore: null,
      DetailedScore: null,
      DetailedScore7: null, //获取学生数据只中的前面7个做初步展示，点击查看全部文字的时候再展示全部
      time_data: null,
      ModelTypeData: ["练习型", "混合型", "对话型", "讲授型"],
      join_map_data: [],
      // 页面可以输入建议、结论框文字的长度
      result1: "",
      resultLength1: 0,
      result2: "",
      resultLength2: 0,
      result3: "",
      resultLength3: 0,
      option
    };
  },
  components: {
    Behavior
  },
  created() {
    let _data = JSON.parse(sessionStorage.getItem("lesson_data"));
    if (_data != undefined) {
      this.lesson_data = _data;
      this.htmlTitle = "《" + _data.LessonName + "》" + "课堂观察分析报告";
      this.BehaviorRecord = _data.BehaviorRecord;
      // 教学行为分析结论与建议的结论和建议输入框：
      this.result1 = _data.BehaviorRecord.Conclusion;
      this.resultLength1 = _data.BehaviorRecord.Conclusion.length;
      this.result2 = _data.BehaviorRecord.Suggest;
      this.resultLength2 = _data.BehaviorRecord.Suggest.length;

      this.LessonModel = _data.LessonModel;
      this.result3 = _data.LessonModel.Conclusion; //页面第三个输入框结论
      this.resultLength3 = _data.LessonModel.Conclusion.length; //结论内容长度
      this.StuAvailableScore = _data.StuAvailableScore;
      this.time_data = _data.StuAvailableScore.Timestamp;
      this.DetailedScore = _data.StuAvailableScore.DetailedScore;
      if (_data.StuAvailableScore.DetailedScore.length > 5) {
        this.DetailedScore7 = deep_clone(_data.StuAvailableScore.DetailedScore).slice(0, 5);
      } else {
        this.showAllVisible = true;
      }
    }
    this.get_mapdata_need();
  },
  watch: {
    "$refs.input3"(a, b) {
      // console.log(a)
    }
  },
  mounted() {
    // console.log(this.$refs.input3)
    //教师行为分析
    this.teacher_action_map();
    // 参与度散点图
    this.join_map();
    //S-T模型
    this.S_T_map();
    //RT-CH模型
    this.RT_CH_map();
    // 行为转化率
    this.rate_map1();
    this.rate_map();

    this.initFocus();

    this.initEmoLine();
  },
  methods: {
    initFocus() {
      const lineDom = this.$refs.mylineRef;
      const lineChart = echarts.init(lineDom);
      lineChart.setOption(lineOption);
    },

    initEmoLine() {
      const emoDom = this.$refs.emolineRef;
      const emoChart = echarts.init(emoDom);
      emoChart.setOption(emotionOption);
    },

    // 可输入框
    inputWord(num) {
      switch (num) {
        case 1:
          this.resultLength1 = this.$refs.input1.innerText.length;
          if (this.resultLength1 > 500) {
            this.$refs.input1.innerText = this.$refs.input1.innerText.substr(0, 500);
            this.resultLength1 = 500;
            this.$message.error("结论不能超过500个字符");
          }
          break;
        case 2:
          this.resultLength2 = this.$refs.input2.innerText.length;
          if (this.resultLength2 > 500) {
            this.$refs.input2.innerText = this.$refs.input2.innerText.substr(0, 500);
            this.resultLength2 = 500;
            this.$message.error("建议不能超过500个字符");
          }
          break;
        case 3:
          this.resultLength3 = this.$refs.input3.innerText.length;
          if (this.resultLength3 > 500) {
            this.$refs.input3.innerText = this.$refs.input3.innerText.substr(0, 500);
            this.resultLength3 = 500;
            this.$message.error("结论不能超过500个字符");
          }
          break;
      }
    },
    // 时间转秒
    timeToSec(time) {
      var hour = parseInt(time.split(":")[0]);
      var min = parseInt(time.split(":")[1]);
      var sec = parseInt(time.split(":")[2]);
      var s = Number(hour * 3600) + Number(min * 60) + Number(sec);
      return s;
    },
    // 页面篇幅长度只能放下一排20个值，所以抽20个
    getTwentyVal(arr, num) {
      if (arr.length <= 20) {
        return arr;
      } else {
        let ratio = arr.length / 20;
        let array = [];
        for (var i = 0; i < 20; i++) {
          array.push(arr[Math.ceil(ratio * i)]);
        }
        return array;
      }
    },
    //参与度散点图的点的坐标
    get_mapdata_need() {
      let arr1 = this.time_data;
      let arr2 = this.StuAvailableScore.AvgJoinDegree;
      for (var i = 0; i < arr1.length; i++) {
        for (var j = 0; j < arr2.length; j++) {
          if (j == i) {
            var _arr = [];
            _arr.push(arr1[i]);
            _arr.push(arr2[j]);
            this.join_map_data.push(_arr);
          }
        }
      }
    },
    teacher_action_map() {
      // console.log(this.BehaviorRecord.Stu.RaiseHand)
      let myChart = echarts.init(document.getElementById("teacher-action-map"));
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {d}%"
        },
        color: ["#78F8FC", "#38C3FF", "#2CA1FF", "#21DBF3", "#E0D901", "#E4BF00", "#D9CC00", "#F6DB49"],
        legend: {
          data: ["站立授课", "下讲台授课", "板书", "走动讲课", "举手", "读写", "听讲", "互动"]
        },
        series: [
          {
            name: "教师",
            type: "pie",
            radius: ["40%", "60%"],
            center: ["50%", "60%"], //可调整饼图相对于父盒子的位置
            data: [
              {
                value: this.BehaviorRecord.Tch.StandOn,
                name: "站立授课"
              },
              {
                value: this.BehaviorRecord.Tch.DownPlatform,
                name: "下讲台授课"
              },
              {
                value: this.BehaviorRecord.Tch.BlackBoard,
                name: "板书"
              },
              {
                value: this.BehaviorRecord.Tch.Moving,
                name: "走动讲课"
              }
            ]
          },
          {
            name: "学生",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],
            center: ["50%", "60%"], //可调整饼图相对于父盒子的位置
            label: {
              normal: {
                position: "inner"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: this.BehaviorRecord.Stu.RaiseHand,
                name: "举手"
              },
              {
                value: this.BehaviorRecord.Stu.ReadWrite,
                name: "读写"
              },
              {
                value: this.BehaviorRecord.Stu.Listening,
                name: "听讲"
              },
              {
                value: this.BehaviorRecord.Stu.Interaction,
                name: "互动"
              }
            ]
          }
        ]
      });
    },
    join_map() {
      let myChart = echarts.init(document.getElementById("join-map"));
      myChart.setOption({
        legend: {
          show: true,
          top: 20,
          center: 0,
          textStyle: {
            fontSize: 14,
            color: "#FFA720"
          }
        },
        tooltip: {
          trigger: "axis"
          // formatter: "{a} <br/> 时间：{c0} s <br/> 参与度：{c1} %"
        },
        xAxis: {
          name: "时间/s",
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: "参与度/%",
          splitLine: {
            show: false
          },
          max: 100
        },
        series: [
          {
            name: "平均参与度曲线",
            type: "line",
            symbol: "none", // 去掉线的拐点
            color: "#FFA720",
            data: this.join_map_data
          }
        ]
      });
    },
    S_T_map() {
      let show_data = this.LessonModel.ST_Value;
      let _max = show_data[show_data.length - 1];
      // console.log(this.ST_Value)
      let x_value = [];
      for (var i = 0; i < _max; i++) {
        x_value.push(i);
      }
      let myChart = echarts.init(document.getElementById("S-T-map"));
      myChart.setOption({
        title: {
          text: "S - T 模型",
          left: "center"
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          name: "T",
          nameLocation: "end",
          type: "category",
          boundaryGap: false,
          splitNumber: 5,
          max: _max,
          min: 0,
          data: x_value,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#ddd"
            }
          },
          axisTick: {
            show: false,
            alignWithLabel: true
          }
        },
        yAxis: {
          name: "S",
          nameLocation: "end",
          max: _max,
          splitNumber: 5,
          min: 0,
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#ddd"
            }
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: "transparent"
            }
          }
        },
        series: [
          {
            name: "S-T曲线",
            type: "line",
            step: "end",
            lineStyle: {
              color: "#3DE2FF"
            },
            itemStyle: {
              color: "rgb(33,148,246)",
              borderWidth: 1,
              borderColor: "#3DE2FF"
            },
            data: show_data
          }
        ]
      });
    },
    RT_CH_map() {
      let myChart = echarts.init(document.getElementById("RT-CH-map"));
      myChart.setOption({
        title: {
          text: "RT-CH模型",
          left: "center"
        },
        grid: {
          left: "20%",
          right: "20%",
          bottom: "10%",
          containLabel: true
        },
        tooltip: {
          trigger: "item", //触发：散点类用item，柱形之类的坐标轴触发用axis。trigger：item对应type：scatter/effectScatter；trigger：axis对应type：line
          axisPointer: {
            type: "effectScatter" //这里只有hover在辐射点之上才触发
          },
          formatter: function (param) {
            //显示框自定义
            return (
              '<p style="display:flex;justify-content:space-between"><span>CH值 :</span> ' +
              "<span>" +
              param.data[1].toFixed(2) +
              "</span>" +
              "</p>" +
              '<p style="display:flex;justify-content:space-between"><span>RT值 :</span> ' +
              "<span>" +
              param.data[0].toFixed(2) +
              "</span>" +
              "</p>"
            );
          }
        },
        xAxis: {
          name: "RT",
          //隐藏方格线
          splitLine: {
            show: false
          }
        },
        yAxis: {
          name: "CH",
          splitLine: {
            show: false
          }
        },
        series: [
          // 提示点
          {
            type: "effectScatter",
            symbolSize: 8,
            data: [[this.LessonModel.Rt, this.LessonModel.Ch]],
            color: "#08CCFF"
          },
          //线
          {
            data: [
              [0, 0],
              [0.5, 1],
              [1, 0]
            ],
            type: "line",
            symbol: "none", // 去掉线的拐点
            color: "#3D89DE"
          },
          {
            data: [
              [0.2, 0.4],
              [0.8, 0.4]
            ],
            type: "line",
            symbol: "none",
            color: "#3D89DE"
          },
          {
            data: [
              [0.3, 0],
              [0.3, 0.6]
            ],
            type: "line",
            symbol: "none",
            color: "#3D89DE"
          },
          {
            data: [
              [0.7, 0],
              [0.7, 0.6]
            ],
            type: "line",
            symbol: "none",
            color: "#3D89DE"
          },
          {
            data: [
              [0, 0],
              [1, 0]
            ],
            type: "line",
            symbol: "none",
            color: "#3D89DE"
          },
          // 标注文字
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.44, 0.6]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["对话型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: "#000"
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.13, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["练习型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: "#000"
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.44, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["混合型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: "#000"
              }
            }
          },
          {
            type: "scatter",
            symbolSize: 1,
            symbol: "roundRect",
            data: [[0.74, 0.2]],
            label: {
              normal: {
                position: "middle",
                distance: 0,
                show: true,
                formatter: ["讲授型"].join("\n"),
                backgroundColor: "transparent",
                fontSize: 14,
                color: "#000"
              }
            }
          }
        ]
      });
    },
    rate_map1() {
      let myChart = echarts.init(document.getElementById("rate-map1"));
      myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b}:{d}%"
        },
        series: [
          {
            type: "pie",
            radius: "70%",
            center: ["50%", "50%"],
            color: ["#08A8FF", "#08FCFF"],
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            data: [
              { value: this.LessonModel.StuRate.toFixed(2), name: "学生行为" },
              {
                value: (1 - this.LessonModel.StuRate).toFixed(2),
                name: "教师行为"
              }
            ]
          }
        ]
      });
    },
    rate_map() {
      let myChart = echarts.init(document.getElementById("rate-map"));
      myChart.setOption({
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            color: ["#F0D600", "#00145A"],
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            data: [{ value: this.LessonModel.Ch }, { value: 1 - this.LessonModel.Ch }]
          }
        ]
      });
    }
  }
};
</script>
<style lang="scss">
.AI-report {
  #teacher-action-map {
    display: inline-block;
    margin: 0 auto;
  }

  .bgc_b {
    background-color: #eaf5ff;
  }
}

.report-observation {
  .report_participation {
    display: flex;
    height: 150px;
    margin-bottom: 15px;

    .report_average {
      display: flex;
      flex-direction: column;
      width: 150px;
      justify-content: space-around;
      align-items: center;
      border: 1px solid #666;
      border-radius: 20px;
      margin-right: 10px;

      .count {
        font-size: 30px;
        font-weight: bold;
      }
    }

    .student_action {
      flex: 1;
      border: 1px solid #666;
      border-radius: 20px;
      padding: 20px;

      .stu_count {
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
        .count_body {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          width: 100px;
          height: 65px;
          span {
            font-size: 14px;
          }
          .count {
            margin-bottom: 10px;
            font-size: 20px;
          }
        }
      }
    }
  }

  .focus_container {
    display: flex;
    flex-direction: column;

    .focus_box_container {
      display: flex;
      height: 100px;
      width: 100%;
      margin-top: 10px;
      .box {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        border: 1px solid #666;
        border-radius: 20px;
        width: 33%;
        padding: 10px;

        .box_info {
          line-height: normal;
        }
      }
      .middle {
        margin: 0 10px;
      }
    }
  }
}

.title {
  font-size: 18px;
}

.summary_merge {
  padding: 0 10px;
}

.ch_container {
  margin: 10px 0;

  .st_tip {
    text-align: justify;
    line-height: normal;
    li {
      list-style: disc;
      margin: 0 220px;
    }
    li:first-child {
      list-style: none;
    }
  }
}
</style>
